<template>
  <div>
    <div class="m-3 p-3 bg-white">
      <a-spin :spinning="confirmLoading">
        <a-list style="margin-left: 20px" :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }" :data-source="channelConfigs">
          <template #renderItem="{ item }">
            <a-card hoverable style="max-width: 200px; margin-bottom: 20px" @click="setting(item)">
              <template #cover>
                <a-image
                  style="width: 150px; height: 150px; margin-left: 25px"
                  :preview="false"
                  :src="getIcon(item.code)"
                  :fallback="fallbackImg"
                />
              </template>
              <a-card-meta style="display: flex; justify-content: space-between" :title="item.name" />
            </a-card>
          </template>
        </a-list>
      </a-spin>
    </div>
    <channel-pay-config-edit ref="channelPayConfigEdit" @ok="init" />
  </div>
</template>

<script setup lang="ts">
  import { $ref } from 'vue/macros'
  import { findAll, PayChannelConfig } from '/@/views/payment/system/channel/ChannelConfig.api'
  import ChannelPayConfigEdit from '/@/views/payment/channel/config/ChannelPayConfigEdit.vue'
  import { onMounted } from 'vue'
  import alipay from '/@/assets/payment/alipay.svg'
  import wechat from '/@/assets/payment/wechat.svg'
  import unionPay from '/@/assets/payment/unionPay.svg'
  import wallet from '/@/assets/payment/wallet.svg'
  import { payChannelEnum } from '/@/enums/payment/payChannelEnum'

  let confirmLoading = $ref(false)
  let channelConfigs = $ref<PayChannelConfig[]>([])

  const channelPayConfigEdit = $ref<any>()

  // 默认图片的base64值
  const fallbackImg =
    ''

  onMounted(() => {
    init()
  })

  /**
   * 初始化并展示
   */
  async function init() {
    confirmLoading = true
    // 列表信息
    const configResults = await findAll()
    channelConfigs = configResults.data
    confirmLoading = false
  }

  /**
   * 打开支付设置界面
   */
  function setting(record: PayChannelConfig) {
    channelPayConfigEdit.show(record)
  }

  /**
   * 获取icon
   */
  function getIcon(type: string) {
    switch (type) {
      case payChannelEnum.ALI:
        return alipay
      case payChannelEnum.WECHAT:
        return wechat
      case payChannelEnum.UNION_PAY:
        return unionPay
      case payChannelEnum.WALLET:
        return wallet
      default:
        return ''
    }
  }
</script>

<style scoped lang="less"></style>
